<template>
  <div class="appHeaderWrapper" ref="header">
    <div class="status-bar" ref="statusBar"></div>
    <div class="app-header">
      <div class="status-bar" ref="statusBar"></div>
      <div class="inner">
        <i class="go-back" @click="goback" v-if="showArrow"></i>
        <p>{{title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      showArrow: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (window.nativeMethod) {
        let statusBarHeight = window.nativeMethod.getStatusBarHeight() / 4;
        this.$refs.statusBar.style = "height:" + statusBarHeight + "px";
        let headerHeight = 44 + statusBarHeight;
        this.$refs.header.style = "height:" + headerHeight + "px";
      }
    });
  },
  methods: {
    goback() {
      this.$router.back();
    }
  }
};
</script>

<style lang="less">
@import "./app-header.less";
</style>